<template>
  <div class="vb">
    <a-typography-title :level="4" class="header">
      <img
        src="@/assets/left-s-line.png"
        class="left-s-line"
        @click="handleAvatarClick"
      />
      查看需求
    </a-typography-title>
    <div class="cont">
      <div class="wdfhk">我的需求</div>
      <div class="fknr">
        <div class="contTit">{{ feedDetail.feedbackContent }}</div>
        <div class="contImg">
          <img
            v-for="(item, index) in feedDetail.feedbackPhotoList"
            :key="index"
            :src="item"
            @click="shdfkj(item)"
          />
        </div>
      </div>

      <div class="wdfhk">平台反馈</div>
      <div class="fknr">
        <div class="contTit">{{ feedDetail.handleOption }}</div>
        <div class="contImg">
          <img
            v-for="(item, index) in feedDetail.platformPhotoList"
            :key="index"
            :src="item"
            @click="shdfkj(item)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { feedbackDetail } from '@/api/api'
import { useRoute, useRouter } from 'vue-router'
import { ImagePreview } from 'vant'
const route = useRoute()
const router = useRouter()
const feedDetail = ref({})
onBeforeMount(() => {
  feedbackDetail(route.query.id).then((res) => {
    if (res.code == 200) {
      res.data.feedbackPhotoList = res.data.feedbackPhoto.split(',') //图片
      res.data.platformPhotoList = res.data.platformPhoto.slice(1, -1).split(",");
      feedDetail.value = res.data
    } else {
      Toast.fail(res.msg)
    }
  })
})
const handleAvatarClick = () => {
  router.push({ path: '/needs' })
}

const shdfkj = (v) => {
  ImagePreview({
    images: [v],
  })
}
</script>

<style scoped lang='less'>
.vb {
  .header {
    text-align: center;
    margin: 0;
    padding: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    font-style: normal;
    .left-s-line {
      width: 20px;
      position: absolute;
      left: 10px;
      top: 15px;
    }
  }

  .cont {
    .wdfhk {
      width: 64px;
      height: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 22px;
      font-style: normal;
      width: 100%;
      height: 54px;
      background: #fcfaf4;
      padding: 16px;
    }
    .fknr {
      padding: 16px;
      .contTit {
        // width: 224px;
        // height: 22px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.5);
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }

      .contImg {
        display: flex;
        flex-wrap: wrap;
        margin-top: 12px;
        img {
          width: 100px;
          height: 100px;
          margin: 5px;
        }
      }
    }
  }
}
</style>